
<template>
	<view class="page-search">
		<view class="search">
			<view class="input">
				<cl-input
					prefix-icon="cl-icon-search"
					:placeholder="hotTitle"
					v-model="keyword"
					@search="search"
				></cl-input>

				<!-- <search :name="searchName"   @confirm="search" ></search> -->

			</view>
			<image src="/static/icon/message.png" />
		</view>
		<!-- 今日热点 -->
		<view class="hot">
			<view class="head">
				<view class="icon">
					<image src="/static/icon/topic.png" />
				</view>
				<view class="title">搜索历史</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in history" :key="index">
					<view class="name" @click="gosearch(item)">{{ item }}</view>
				</view>
			</view>
		</view>
		<!-- 话题榜 -->
		<view class="rank">
			<view class="head">
				<view class="icon">
							<image src="/static/icon/hot.png" />
				</view>
				<view class="title">今日热点</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in rank" :key="index" @tap="goDetail(item)">
					<view class="num" :class="{ 'is-three': index < 3 }">{{ index + 1 }}</view>
					<view class="name"
						><cl-text
							:value="item.title"
							color="#000000"
							:size="28"
							:ellipsis="1"
						></cl-text
					></view>
					<view class="tag is-hot" v-if="item.isHot">热</view>
					<view class="tag is-new" v-if="item.isNew">新</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>



import {hotList} from '@/api/article';
export default {
	data() {
		return {
			model:"article",
			hotTitle: "热搜：热搜内容标题",
			keyword:"",
			hot: [
				{ name: "各地楼价持平稳上升" },
				{ name: "各地楼价持平稳上升" },
				{ name: "各地楼价持平稳上升" },
				{ name: "中国经济半年报" },
				{ name: "各地楼价持平稳上升" },
				{ name: "各地楼价持平稳上升" },
				{ name: "穿拖鞋驾车" },
				{ name: "各地楼价持平稳上升" },
			],
			rank: [
				{
					name: "各地楼价持平稳上升各地楼价持平稳上升各地楼价持平稳上升",
					isHot: true,
					isNew: false,
				},
				{ name: "各地楼价持平稳上升", isHot: false, isNew: true },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: true },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
				{ name: "各地楼价持平稳上升", isHot: false, isNew: false },
			],

			searchName: 'article-search',
			keywordName: 'article_keyword',

			keyword: '',
			history: [],
			showHistory: true,
			category_id: 'recommend',
			scroll_category_id: 'scroll_category_id_0',
			page: 1,
			page_size: 10,
			nav: [],
			slider: [],
			list: [],
			showNoData: false,
			showPageLoading: false,
			hasMoreData: true,
			showNavFloat: false
		};
	},

	onLoad(e) {

		if(e.model){
				this.model  = e.model
		}

		this.searchName=this.model+'-search'
		this.keywordName=this.model+'_keyword'

		if (e.category_id > 0) {
			this.category_id = e.category_id;
		}
		let history = uni.getStorageSync(this.searchName);
		if (Array.isArray(history)) {
			this.history = history;
		}


		console.log("history",history)


		this.keyword = uni.getStorageSync(this.keywordName);
		console.log("keyword",this.keyword)
		this.getHotData();

	},

	onShow() {
		this.$initPageTitle(); //初始化页面标题
		// this.keyword = uni.getStorageSync(this.keywordName);
		// console.log("keyword",this.keyword)
		// this.getHotData();
	},

	onReady() {},
	methods: {
		/*搜索*/
		initSearch() {
			this.showHistory = true;
		},

		toSearch() {
			uni.navigateTo({
				url: "/pages/search?model="+this.model,
			});
		},
		search(keyword) {
			// if (keyword != '') {
				this.keyword = keyword;
				uni.setStorageSync(this.keywordName, this.keyword);
			// }
			this.showHistory = false;
			if (!this.history.includes(this.keyword)) {
				this.history.push(this.keyword);
				uni.setStorageSync(this.searchName, this.history);
			}
			this.nav = [];
			this.tabs = [];
			console.log(this.keywordName,keyword);

		  uni.switchTab({
			// uni.navigateTo({
				url: "/pages/"+this.model+"/index",
			});


			// this.loadData();
		},
		goDetail(item){
			uni.navigateTo({
							url: "/pages/"+this.model+"/detail?id="+item.id,
			});
		},
		/*加载数据*/
		loadData() {
			this.hasMoreData = true;
			this.page = 1;
			this.showNoData = false;
			this.slider = [];
			this.list = [];
			this.getData();
		},

		gosearch(item){
         this.search(item)
		},

/*获取数据*/
		getHotData() {
			this.$http
			.get(`${hotList}`,
			    {	model: this.model}
			)
			.then(r => {
					this.rank = r.data;
			})
			.catch((e) => {
			});
		},

		/*获取数据*/
		getData() {
			this.$http
					.get(`${articleSearch}`, {
						keyword: this.keyword,
						page:this.page
						})
					.then(res => {
						// this.loading = false;
						// this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
						// this.banners = [...this.banners, ...r.data];
						// console.log(this.banners)

								if (res.code == 200) {
									if (this.page == 1) {
										this.list = [];
									}
									if (res.data.page > this.page) {
										this.hasMoreData = true;
									} else {
										this.hasMoreData = false;
									}
									// this.list = this.list.concat(res.data.list);
										this.list = this.list.concat(res.data);
										cosole.log(this.list)
									if (this.page == 1) {
										if (this.list.length > 0) {
											this.showNoData = false;
										} else {
											this.showNoData = true;
										}
									}
									this.showPageLoading = false;
									this.page += 1;
								} else {
									this.$alert(res.msg);
								}

					})
					.catch(() => {
						// this.loading = false;
					});

		},

		/*切换导航*/
		navChange(category_id) {
			this.category_id = category_id;
			this.loadData();
		},

		/*加载更多*/
		loadMore() {
			if (this.hasMoreData) {
				this.getData();
			}
		},

		/*滚动时导航栏浮动*/
		navFloatShow(e) {
			if (e.detail.scrollTop > 50) {
				if (!this.showNavFloat) {
					this.showNavFloat = true;
				}
			} else {
				if (this.showNavFloat) {
					this.showNavFloat = false;
				}
			}
		},

		/*隐藏导航浮动*/
		navFloatHide() {
			this.showNavFloat = false;
		}
	}
};
</script>

<style lang="scss">
.page-search {
	.search {
		display: flex;
		align-items: center;
		width: 100%;
		height: 123rpx;
		padding: 0 35rpx;
		background-color: #3869E6;
		box-sizing: border-box;

		.input {
			flex: 1;
		}

		image {
			width: 38rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}
	}
	.hot {
		padding: 30rpx 12rpx 10rpx 30rpx;
		.head {
			display: flex;
			align-items: center;
			margin-bottom: 41rpx;

			.icon {
				margin-right: 22rpx;
				image {
					width: 23rpx;
					height: 35rpx;
				}
			}
			.title {
				font-size: 36rpx;
				font-weight: 400;
				color: #000000;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
		}
		.item {
			height: 66rpx;
			margin-right: 18rpx;
			margin-bottom: 20rpx;
			padding: 0 38rpx;
			background-color: #f2f2f2;
			border-radius: 33rpx;
			line-height: 66rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #000000;
		}
	}
	.rank {
		padding: 30rpx 40rpx;
		.head {
			display: flex;
			align-items: center;
			margin-bottom: 46rpx;
			.icon {
				width: 35rpx;
				height: 35rpx;
				margin-right: 22rpx;
				image {
					width: 35rpx;
					height: 35rpx;
				}
			}
			.title {
				font-size: 36rpx;
				font-weight: 400;
				color: #000000;
			}
		}
		.item {
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 24rpx;
		}
		.num {
			margin-right: 34rpx;
			color: #ffab6a;
		}
		.is-three {
			color: #fe273f;
		}
		.name {
			width: 80%;
			font-size: 28rpx;
			font-weight: 400;
			color: #000000;
		}
		.tag {
			position: absolute;
			right: 0;
		}
		.is-hot {
			width: 34rpx;
			height: 34rpx;
			background-color: #fe273f;
			border-radius: 10rpx;
			text-align: center;
			font-size: 20rpx;
			font-weight: 400;
			color: #ffffff;
		}
		.is-new {
			width: 34rpx;
			height: 34rpx;
			background-color: #f6b37f;
			border-radius: 10rpx;
			text-align: center;
			font-size: 20rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}
}
</style>
